<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-22 19:15:27
 * @Description  : 添加或者更新部门面板
-->

<template>
  <!-- <n-card
    :size="'small'"
    style="width: 768px"
    role="dialog"
    title="添加部门"
    :bordered="false"
    aria-modal="true"
  >
    <template #header-extra>
      <SvgIcon
        icon="chacha"
        class="cursor-pointer"
        @click="handleClose"
      ></SvgIcon>
    </template> -->
  <n-form
    ref="depFormRef"
    :label-width="isSmall ? 100 : 150"
    label-placement="left"
    :label-align="isSmall ? 'left' : 'right'"
    :model="dep"
    size="small"
    require-mark-placement="right"
    :rules="formRule"
  >
    <n-form-item label="部门名称：" path="name" class="!w-[400px]">
      <n-input
        v-model:value="dep.name"
        :allow-input="noSideSpace"
        placeholder="请输入部门名称"
        clearable
        :maxlength="25"
      />
    </n-form-item>

    <n-form-item label="空间大小：" path="sizeMax">
      <n-input-number
        :value="+convertBytes(dep.sizeMax, 'GB')"
        @update:value="handleByteChange"
        :min="0"
        :max="2048"
        clearable
        placeholder="请输入空间大小"
      >
        <template #suffix> GB </template>
      </n-input-number>
      <div class="ml-[12px] text-gray-400 text-[12px]">(GB) 0则不限制</div>
    </n-form-item>

    <n-form-item label="上级部门" path="pid" class="!w-[400px]">
      <DepSelect
        :root-dep="rootDep"
        :default-dep-id="dep.pid"
        :multiple="false"
        @change-value="handlePidChange"
      ></DepSelect>
    </n-form-item>

    <n-form-item label="该部门成员可见的的组织架构范围">
      <n-radio-group v-model:value="depInfoType" name="radiobuttongroup2">
        <n-radio-button :value="0"> 所有部门 </n-radio-button>
        <n-radio-button :value="1"> 根部门及其子部门 </n-radio-button>
        <n-radio-button :value="2"> 指定部门 </n-radio-button>
      </n-radio-group>
    </n-form-item>

    <MyTransition>
      <div v-if="depInfoType === 2">
        <n-form-item label=" " path="cooperatDepIds" class="!w-[400px]">
          <DepSelect
            :root-dep="rootDep"
            :default-dep-ids="dep.cooperatDepIds"
            @change-value="handleCopDepChange"
          ></DepSelect>
        </n-form-item>
      </div>
    </MyTransition>

    <MyTransition>
      <div v-if="depInfoType === 0">
        <n-form-item label=" ">
          <n-alert :show-icon="false" type="success" class="!text-[13px] block">
            该部门成员进行协作共享时，可以选择其他所有部门(用户)
          </n-alert>
        </n-form-item>
      </div>
    </MyTransition>

    <MyTransition>
      <div v-if="depInfoType === 1">
        <n-form-item label=" ">
          <n-alert :show-icon="false" type="success" class="!text-[13px]">
            该部门成员进行协作共享时，仅支持当前部门及其子部门(用户)
          </n-alert>
        </n-form-item>
      </div>
    </MyTransition>
    <MyTransition>
      <div v-if="depInfoType === 2">
        <n-form-item label=" ">
          <n-alert :show-icon="false" type="success" class="!text-[13px]">
            该部门成员进行协作共享时，支持指定部门，包含当前部门及子部门
          </n-alert>
        </n-form-item>
      </div>
    </MyTransition>

    <n-divider class="!my-2" />
    <n-form-item label=" " v-permission="[PERMISSIONS.DEP_EDIT]">
      <n-button type="primary" class="grent-btn w-[120px]" @click="handleSave">
        保存
      </n-button>
    </n-form-item>
  </n-form>
  <!-- </n-card> -->
</template>

<script setup lang="ts">
import type { FormInst } from 'naive-ui'
import type { DepartmentRes, DepartmentUpdateReq } from '@/types/department'
import { PERMISSIONS } from '@/constants/permission'
import { noSideSpace } from '@/utils'
import { convertBytes, convertToBytes } from '@/utils/index'
import { userMenuShow } from '@/hooks/useMenuShow'
import type { IndexObj } from '@/types/commom'

const props = defineProps<{
  isModify: boolean
  depRes?: DepartmentRes
  delDep?: IndexObj
  rootDep?: IndexObj
}>()

const emits = defineEmits<{
  (e: 'visibleChange', value: boolean): void
  (e: 'changeDep', type: number, data: DepartmentUpdateReq): void
}>()

const handleClose = () => {
  emits('visibleChange', false)
}

const { isSmall } = userMenuShow()

const depInfoType = ref(0)

const dep = reactive<DepartmentUpdateReq>({
  name: '',
  pid: '1',
  sizeMax: '0',
  cooperatDepIds: []
})

const initDep = () => {
  if (props.isModify) {
    const { id, pid, name, copDepartments, sizeMax } =
      props.depRes as DepartmentRes
    dep.depId = id
    dep.name = name
    dep.pid = pid
    dep.sizeMax = sizeMax
    dep.cooperatDepIds = copDepartments.map((item) => item.linkDepId)
    if (dep.cooperatDepIds.length === 1 && dep.cooperatDepIds[0] === '0') {
      depInfoType.value = 0
    } else if (
      dep.cooperatDepIds.length === 1 &&
      dep.cooperatDepIds[0] === '-1'
    ) {
      depInfoType.value = 1
    } else {
      depInfoType.value = 2
    }
  } else {
    if (props.delDep) {
      dep.pid = props.delDep.id
    }
  }
}

onMounted(() => {
  initDep()
})

const formRule = {
  name: [
    {
      required: true,
      message: '请输入部门名称',
      trigger: ['blur']
    },
    {
      min: 1,
      max: 50,
      trigger: ['blur'],
      message: '长度在1-50位'
    }
  ],
  sizeMax: [
    {
      required: true,
      message: '请输入部门空间大小',
      trigger: ['blur']
    }
  ],
  pid: [
    {
      required: true,
      message: '请选择父级部门',
      trigger: ['blur']
    }
  ]
}

const depFormRef = ref<FormInst | null>(null)

const handleByteChange = (value: any) => {
  if (value === undefined || value === null || value === '') {
    return
  }
  if (!/^\d+$/.test(value)) {
    return
  }
  dep.sizeMax = convertToBytes('' + value + 'GB')
}

const handlePidChange = (value: string | string[]) => {
  dep.pid = value as string
}

const handleCopDepChange = (value: string | string[]) => {
  dep.cooperatDepIds = value as string[]
}

const handleSave = () => {
  depFormRef.value?.validate((error: any) => {
    if (error) {
      return
    }

    if (depInfoType.value === 0) {
      dep.cooperatDepIds = ['0']
    } else if (depInfoType.value === 1) {
      dep.cooperatDepIds = ['-1']
    } else {
      dep.cooperatDepIds = dep.cooperatDepIds.filter((item) => {
        return item !== '0' && item !== '-1'
      })
    }

    if (props.isModify) {
      emits('changeDep', 1, dep)
    } else {
      emits('changeDep', 0, dep)
    }
  })
}
</script>

<style scoped lang="scss"></style>
